<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>用户页面</title>
<link rel="stylesheet" href="js/layui-2.5.4/css/layui.css">
<script src="js/layui-2.5.4/layui.js"></script>
<script type="text/javascript" src="js/my_js/user.js"></script>
</head>

<body>
	<!-- 页面结构 -->
	<div class="layui-main">
		<!-- 表格上方标题 -->
		<blockquote class="layui-elem-quote">用户列表</blockquote>

		<div class="demoTable">
			搜索账户：
			<div class="layui-inline">
				<input class="layui-input" name="id" id="demoReload"
					autocomplete="off">
			</div>
			<button id="domew" class="layui-btn" data-type="reload">搜索</button>
			<button id="resetD" type="reset" class="layui-btn layui-btn-normal">重置</button>
		</div>
		<br>
		<!-- 添加按钮 -->
		<a class="layui-btn layui-btn-sm" id="add-user-btn">添加用户</a>
		<!-- 添加按钮 -->
		<a class="layui-btn layui-btn-sm layui-btn-danger" id="del-users-btn">批量删除</a>
		<!-- 用户表 -->
		<table id="user-tbl" lay-filter="user-tbl"></table>
		<script type="text/html" id="user-tbl-toolbar">
      <a class="layui-btn layui-btn-xs" lay-event="updateUser">编辑</a>
      <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="deleteUser">删除</a>
    </script>
		<!-- 数据序号 -->
		<script type="text/html" id="indexTpl">
    	{{d.LAY_TABLE_INDEX+1}}
	</script>
	</div>

	<!-- 添加用户弹出层 -->
	<div id="add-user-layer" style="display: none; padding: 20px">
		<form id="add-user-form" class="layui-form layui-form-pane">
			<div class="layui-form-item">
				<label class="layui-form-label">账户</label>
				<div class="layui-input-block">
					<input type="text" name="account" class="layui-input"
						lay-verify="required" autocomplete="off">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">密码</label>
				<div class="layui-input-block">
					<input type="password" name="password" class="layui-input"
						lay-verify="required">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">姓名</label>
				<div class="layui-input-block">
					<input type="text" name="name" class="layui-input"
						lay-verify="required" autocomplete="off">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">信息</label>
				<div class="layui-input-block">
					<input type="text" name="info" class="layui-input"
						lay-verify="required" autocomplete="off">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit
						lay-filter="add-user-form-submit">提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
	</div>

	<!-- 更新用户弹出层 -->
	<div id="update-user-layer" style="display: none; padding: 20px">
		<form id="update-user-form" class="layui-form layui-form-pane"
			lay-filter="update-user-form">
			<div class="layui-form-item" style="display: none;">
				<label class="layui-form-label">id</label>
				<div class="layui-input-block">
					<input type="text" name="id" class="layui-input" readonly>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">账户</label>
				<div class="layui-input-block">
					<input type="text" name="account" class="layui-input"
						lay-verify="required" autocomplete="off">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">密码</label>
				<div class="layui-input-block">
					<input type="password" name="password" class="layui-input"
						lay-verify="required">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">姓名</label>
				<div class="layui-input-block">
					<input type="text" name="name" class="layui-input"
						lay-verify="required" autocomplete="off">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">信息</label>
				<div class="layui-input-block">
					<input type="text" name="info" class="layui-input"
						lay-verify="required" autocomplete="off">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit
						lay-filter="update-user-form-submit">提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
	</div>


	<!-- 页面JS -->
	<script>
		/*     layui.use(['jquery', 'table', 'layer', 'form'], function() {
		 // 加载layui模块，使用其推荐的【预先加载】方式，详见官网【模块规范】一节
		 var $ = layui.$;
		 var table = layui.table;
		 var layer = layui.layer;
		 var form = layui.form;
		
		 // 显示所有用户
		 table.render({
		 elem: '#user-tbl',
		 url: 'user/all',
		 method: 'get',
		 page: true,//开启分页
		 first: '1',
		 limit:10,
		 limits:[10,20,50,100],
		 theme:'ali',
		 cols: [[
		 {type:'checkbox', fixed: 'left'},
		 {templet: '#indexTpl',title: '序号'},
		 {field: 'account', title: '账户',sort: true},
		 {field: 'password', title: '密码'},
		 {field: 'name', title: '姓名'},
		 {field: 'info', title: '信息'},
		 {field: 'create_Time', title: '更新时间',templet: "<div>{{layui.util.toDateString(d.create_Time, 'yyyy-MM-dd HH:mm:ss')}}</div>"},
		 {toolbar: '#user-tbl-toolbar', title: '操作'}
		 ]],
		 // 表格容器id，用于表格重载
		 id: 'user-tbl',
		 });
		 // 分页位置
		 $('.layui-table-page>div').css("text-align", "center");
		
		 // 点击获取数据进行查询
		 $('#domew').on('click',function(){
		 var demoReload=$('#demoReload').val();
		 //layer.msg(demoReload.length);
		 if (demoReload.length=='') {
		 table.reload('user-tbl', {
		 where: {
		 'account':''
		 }
		 });
		 }if (demoReload!='') {
		 table.reload('user-tbl', {
		 where: {
		 'account':demoReload
		 }
		 });
		 }
		
		 });
		 //重置输入框resetD
		 $('#resetD').on('click',function(){
		 //$('#demoReload')[0].reset();
		 $('#demoReload').val('');
		 });
		
		 // 显示添加用户弹出层
		 $('#add-user-btn').click(function() {
		 // 每次显示前重置表单
		 $('#add-user-form')[0].reset();
		 layer.open({
		 type: 1,
		 title: '添加用户',
		 skin: 'layui-layer-molv',
		 area: ['500px'],
		 content: $('#add-user-layer')
		 });
		 });
		
		 // 添加用户表单提交
		 form.on('submit(add-user-form-submit)', function(data) {
		 // ajax方式添加用户
		 $.ajax({
		 url: "user",
		 type: "POST",
		 data: JSON.stringify(data.field),
		 contentType: 'application/json',
		 dataType: 'json',
		 success: function(data) {
		 if (data.status == 1) {
		 layer.close(layer.index);
		 parent.layer.msg('添加成功', {icon: 1,shade: 0.4,time:1000});
		 table.reload('user-tbl');
		 } else {
		 parent.layer.msg('添加失败', {icon: 2,shade: 0.3,time:1000});
		 }
		 },
		 error: function() {
		 console.log("ajax error");
		 }
		 });
		 // 阻止表单跳转
		 return false;
		 });
		
		 // 监听行工具栏事件：删除用户与更新用户
		 table.on('tool(user-tbl)', function(obj) {
		 // 获取当前行数据和lay-event的值
		 var data = obj.data;
		 var event = obj.event;
		
		 // 删除用户事件
		 if (event === 'deleteUser') {
		 layer.confirm('确定删除该用户吗？', function(index) {
		 // ajax方式删除用户
		 $.ajax({
		 url: 'user/' + data.id,
		 type: "DELETE",
		 dataType: 'json',
		 success: function(data) {
		 if (data.status == 1) {
		 parent.layer.msg('删除成功', {icon: 1,shade: 0.3,time:1000});
		 table.reload('user-tbl');
		 } else {
		 parent.layer.msg('删除失败', {icon: 2,shade: 0.3,time:1000});
		 }
		 },
		 error: function() {
		 console.log("ajax error");
		 }
		 });
		 layer.close(index);
		 });
		 }
		
		 // 更新用户事件
		 if (event === 'updateUser') {
		 // 每次显示更新用户的表单前自动为表单填写该行的数据
		 form.val('update-user-form', {
		 "id": data.id,
		 "account": data.account,
		 "password": data.password,
		 "name": data.name,
		 "info": data.info
		 });
		 // 显示更新用户表单的弹出层
		 layer.open({
		 type: 1,
		 title: '更新用户',
		 skin: 'layui-layer-molv',
		 area: ['500px'],
		 content: $('#update-user-layer')
		 });
		 // 更新用户表单提交
		 form.on('submit(update-user-form-submit)', function(data) {
		 // ajax方式更新用户
		 $.ajax({
		 url: "user",
		 type: "PUT",
		 data: JSON.stringify(data.field),
		 contentType: 'application/json',
		 dataType: 'json',
		 success: function(data) {
		 if (data.status == 1) {
		 layer.close(layer.index);
		 parent.layer.msg('更新成功', {icon: 1,shade: 0.3,time:1000});
		 table.reload('user-tbl');
		 } else {
		 parent.layer.msg('更新失败', {icon: 2,shade: 0.3,time:1000});
		 }
		 },
		 error: function() {
		 console.log("ajax error");
		 }
		 });
		 // 阻止表单跳转
		 return false;
		 });
		 }
		
		 });
		
		 // 批量删除功能
		 // 1.得到table选中行内容
		 // 2.得到删除需要的唯一值，一般是id;
		 // 3.将所要删除的项加入到数组中；
		 // 4.判断是否选中；
		 // 5.发送ajax请求，并附带参数id；
		 $('#del-users-btn').on('click',function(){
		 var checkStatus = table.checkStatus('user-tbl');
		 if(checkStatus.data.length==0){
		 parent.layer.msg('请先选择要删除的数据行！', {icon: 7});
		 return ;
		 }
		 layer.confirm('确定删除该用户吗？', function(index) {
		 var ids = "";
		 for(var i=0;i<checkStatus.data.length;i++){
		 ids += checkStatus.data[i].id+",";
		 }
		 parent.layer.msg('删除中...', {icon: 16,shade: 0.3,time:3000});
		 //layer.msg(ids);
		 $.ajax({
		 url: 'user/ids?ids='+ids,
		 type: "DELETE",
		 dataType: 'json',
		 success: function(data) {
		 if (data.status == 1) {
		 parent.layer.msg('删除成功！', {icon: 1,time:2000,shade:0.2});
		 table.reload('user-tbl');
		 } else {
		 parent.layer.msg('删除失败！', {icon: 2,time:2000,shade:0.2});
		 }
		 },
		 error: function() {
		 console.log("ajax error");
		 }
		 }); 
		 layer.close(index);
		 });
		
		 }); 
		
		 });
		 */
	</script>
</body>

</html>